<template>
	<!-- 关于我们 -->
	<view class="notice-list">
		<div style="padding: 30rpx 20rpx;">
			<view class="notice-item">
				<view class="load" v-if="isEditActive">暂未编辑关于我们哦~</view>
				<view v-if="!isEditActive" v-for="(item, index) in items" :key="index" class="item">
					<text v-if="item.type === 'text'" class="text">{{ item.value }}</text>
					<image v-if="item.type === 'image'" :src="url()+item.src" mode="widthFix" class="image" />
				</view>
			</view>
		</div>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		showAboutUs
	} from '@/request/api.js';
	import {
		url
	} from '@/request/api.js';
	const items = ref([]);

	const isEditActive = ref(false);

	// 在 onMounted 中添加错误处理
	onMounted(async () => {
		try {
			const list = await showAboutUs({
				type: '关于我们'
			});
			console.log(list);
			if (list.data.data != null) {
				// 将多个 JSON 字符串合并为一个有效的 JSON 数组字符串
				let combinedJsonString = '[' + list.data.data.minute.replace(/}{/g, '},{') + ']';
				// 解析合并后的 JSON 数组字符串
				let retrievedArray = JSON.parse(combinedJsonString);
				items.value = retrievedArray
				// console.log(retrievedArray);
			} else {
				console.log("暂未编辑关于我们哦~");
				isEditActive.value = true;
				items.value = [{
					type: 'text',
					value: ''
				}];
			}
		} catch (error) {
			console.error("Failed to fetch data:", error);
			// 处理错误，例如显示一个错误消息
		}
	});
</script>

<style scoped>
	.image {
		width: 100%;
	}

	.load {
		color: #909399;
		text-align: center;
	}


	.item {
		margin-bottom: 30px;
		position: relative;
	}

	.notice-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #efefef;
	}

	.notice-item {
		margin-bottom: 20rpx;
		height: auto;
		/* 修改为auto以适应内容高度 */
		border-radius: 22rpx;
		background-color: white;
		padding: 15px 10px;
		width: 95%;
	}

	.notice-image {
		width: 250rpx;
		height: 160rpx;
		margin-bottom: 10px;
	}

	.notice-title {
		padding: 20px 0px;
		font-weight: bold;
		font-size: 18px;
	}

	.notice-content {
		color: #666;
		font-size: 14px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
	}

	.notice-date {
		color: #999;
		font-size: 13px;
	}
</style>